<script setup lang="ts">
import { Document, Download } from "@element-plus/icons-vue";
import { ref } from "vue";
import { tableList } from "../application/edit/secondStep/data";
import { useRouter } from "vue-router";
const router = useRouter();
const columns = [
  {
    label: "计划时间",
    prop: "time",
    align: "center",
    slot: "time",
    width: "190"
  },
  {
    label: "产出分类",
    prop: "sort",
    align: "center",
    slot: "sort"
  },
  {
    label: "产出内容",
    prop: "connect",
    align: "center",
    showOverflowTooltip: true
  },
  {
    label: "状态",
    prop: "status",
    align: "center",
    slot: "status"
  },
  {
    label: "产出物(多照片)",
    prop: "image",
    align: "center",
    slot: "image"
  },
  {
    label: "完成时间",
    prop: "createTime",
    align: "center"
  },
  {
    label: "操作",
    slot: "action",
    width: "140"
  }
];
const srcList = [
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
  "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
  "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
  "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
  "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg"
];
const tableData = tableList[0].tableData.map((item, index) => {
  if (item.status == 1) {
    item["createTime"] = "2024-02-11";
  } else if (item.status == 2) {
    item["createTime"] = "2024-02-13";
  }
  item["imgArr"] = srcList[parseInt(7 * Math.random()) - 1];
  return item;
});
import { downloadByUrl } from "@pureadmin/utils";
</script>

<template>
  <el-card :body-style="{ padding: '10px' }">
    <template #header>
      <div
        class="text-[20px] font-bold flex justify-center w-full relative items-center"
      >
        <div class="text-[12px] absolute left-0">2024年，浙江省</div>
        <span class="text-[20px] font-bold">
          归属项目：2024年度市级公益创投项目
        </span>
      </div>
    </template>
    <div class="text-[16px] mt-[15px] mb-[20px]">
      <span class="font-bold">项目名称：</span>社区邻里国际共融服务项目
    </div>
    <div>
      <div class="flex items-center justify-between w-full">
        <span class="flex items-center">
          <el-icon class="mr-[10px]"><Document /></el-icon>
          <span class="text-[14px]">项目产品清单</span>
        </span>
        <el-button
          plain
          @click="
            downloadByUrl(
              'https://github.com/xiaoxian521/xiaoxian521/archive/refs/heads/main.zip',
              '2023年杭州市公益创投项目申报书.zip'
            )
          "
        >
          <el-icon><Download /></el-icon>
          导出产出清单
        </el-button>
      </div>
      <div class="px-[20px]">
        <pure-table
          class="mt-[20px]"
          :data="tableData"
          :columns="columns"
          stripe
          border
          :header-cell-style="{
            textAlign: 'center',
            background: '#f5f7fa'
          }"
        >
          <template #image="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.imgArr"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :z-index="10000"
              :preview-teleported="true"
              :preview-src-list="srcList"
              :initial-index="4"
              fit="cover"
            />
          </template>
          <template #time="{ row }">
            {{ row.time ? row.time.join("至") : "" }}
          </template>
          <template #sort="{ row }">
            {{ row.sort == 1 ? "社区服务类" : "为老服务类" }}
          </template>
          <template #status="{ row }">
            <el-tag type="success" v-if="row.status == 1">完成</el-tag>
            <el-tag type="primary" v-else-if="row.status == 2">进行中</el-tag>
            <el-tag type="info" v-else>未开始</el-tag>
          </template>
          <template #action="{ row, index }">
            <el-button type="primary" link v-if="row.status == 2"
              >完成</el-button
            >
            <el-button
              type="primary"
              link
              @click="
                router.push({
                  name: 'projectCarryDetailsEdit'
                })
              "
              v-if="row.status !== 1"
            >
              {{ row.status == 3 ? "提交进度" : "修改进度" }}
            </el-button>
            <el-button
              type="primary"
              link
              v-if="row.status == 1"
              @click="
                router.push({
                  name: 'projectCarryDetailsinfo'
                })
              "
              >查看</el-button
            >
          </template>
        </pure-table>
      </div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped></style>
